<template>
    <div class="comment">
        <h3>评论区</h3>
        <div class="hr"></div>
        <textarea v-model="user_comment" cols="30" rows="3" placeholder="请输入..."></textarea>

        <mt-button type="danger" @click="published">发表</mt-button>
        <div class="cmt-list">
            <ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" v-for="(item, index) in comments" :key="index">
                    <img class="mui-media-object mui-pull-left" :src="item.head_img">
                    <div class="mui-media-body">
                        <span>{{ item.user_name }} <span class="floor">{{ index+1 }} 楼</span></span>
                        <p class='mui-ellipsis'>{{ item.content }}</p>
                        <span>{{ item.add_time | dateFormat }}</span>
                    </div>
				</li>
			</ul>
          
        </div>

        <mt-button type="danger" plain @click="getMore">加载更多...</mt-button>
    </div>
</template>

<script>
    // import { Toast } from '../../node_modules/mint-ui'
    export default {
        name: "comment",
        data() {
            return {
                comments: [],
                pageindex: 1,
                user_comment: "",
            }
        },
        methods: {
            getComment(){
                var url = "https://www.fastmock.site/mock/3bcb60e708abec194c722ac5464b28d8/VueApp/getcomments"
                this.$http.get(url).then(res=>{
                    if(res.status == 200){
                        this.comments = this.comments.concat(res.data.comments)
                        // console.log(res.data)
                    } else{

                    }
                })
            },
            getMore(){ // 加载更多
                this.pageindex++
                this.getComment()
            },
            published(){  // 发表评论
                if(this.user_comment.trim().length == 0){
                    return alert("评论内容不能为空！")
                }
                
                let url = "https://www.fastmock.site/mock/3bcb60e708abec194c722ac5464b28d8/VueApp/publishcomment"
                this.$http.post(url,{ content: this.user_comment.trim() }).then(res=>{
                    if(res.status == 200){
                        // 拼接一个评论对象
                        var cmt = { 
                            user_name: "我", 
                            add_time: new Date(), 
                            head_img: res.data.content[0].head_img,
                            content: this.user_comment.trim() 
                        }
                        this.comments.unshift(cmt)
                        this.content = ""
                    }
                })
            },
        },
        created() {
            this.getComment()
        },
    }
</script>

<style lang="scss" scoped>
    .comment{
        margin-top: 20px;
        h3{
            text-align: left;
            color: darkcyan;
            font-size: 18px;
            font-weight: bold;
            padding-left: 10px;
        }
        .hr{
            width: 94%;
            height: 1px;
            background-color: silver;
            margin: auto;
        }
        textarea{
            margin-top: 10px;
            margin-left: 3%;
            width: 94%;
            font-size: 13px;
        }
        .mint-button{
            width: 94%;
            margin-left: 3%;
            height: 35px;
            font-size: 14px;
            font-weight: bold;

            &:nth-of-type(1){
                margin-top: -10px;
                background-color: crimson;
            }
            
        }
        .cmt-list ul{
            margin-top: 10px;
            margin-bottom: 10px;
            li{
                padding-top: 5px;
                padding-bottom: 0;
                img{
                    border-radius: 50%;
                    width: 42px;
                }
                .mui-media-body{
                    span:nth-of-type(1){
                        color: crimson;
                        font-size: 11px;
                        font-weight: bold;
                        display: flex;
                        justify-content: space-between;
                        .floor{
                            color: silver;
                            font-weight: initial;
                            font-size: 8px;
                        }
                    }
                    .mui-ellipsis{
                        overflow: inherit;
                        white-space: inherit;
                        font-size: 12px;
                        line-height: 1.1em;
                        color: black;
                    }
                    span:nth-of-type(2){
                        color: gray;
                        font-size: 8px;
                    }
                }
            } 
        }
    }
</style>